import {
    createRouter,
    createWebHashHistory
} from 'vue-router'

import storage from './../utils/storage'


import api from './../api/index.js'

const routes = [{
        path: '/home',
        name: 'Home',
        component: () => import('./../components/Home.vue'),
        redirect: '/welcome',
        children: [{
            path: "/welcome",
            name: 'Welcome',
            component: () => import('./../views/Welcome.vue'),
            meta: {
                title: '后台管理系统'
            }
        }]
    },
    {
        path: '/login',
        component: () => import('./../views/Login.vue'),
        name: 'Login'
    },
    {
        path: '/404',
        component: () => import('./../views/404.vue'),
        name: '404',
        meta: {
            title: '404'
        }
    }
]

//创建路由对象
const router = createRouter({
    history: createWebHashHistory(),
    routes
})

//获得当前用户所拥有的菜单(路由)的信息 将这些路由信息添加到Home路由的子路由中
//前端使用 router.addRoute('Home',子路由的信息)
//给Home路由添加子路由 
async function loadAsyncRoutes() {
    //判断当前用户是否已经登录
    let userInfo = storage.getItem("userInfo")
    if (userInfo) {
        //1 如果用户已经登录获得当前用户所拥有的路由的信息
        //让loadAsyncRoutes方法等待api.getUserInfo()执行完毕(后端返回数据) 在向下执行
        //因为 loadAsyncRoutes方法中使用了await关键字 所以loadAsyncRoutes需要使用async关键字修饰
        // loadAsyncRoutes 是一个异步函数
        let res = await api.getUserInfo();
        // res.allRouters 后端用户的路由信息
        // 2 将后端的路由信息转为前端需要的路由信息
        let routes = generateRouter(res.allRouters)
        // 3 将前端需要的路由信息添加到Home路由的子路由中
        routes.map(route => {
            router.addRoute('Home', route)
        })
    }
}

//将后端传入的路由的对象信息转为前端需要的路由的信息,并且放入到一个数组中
function generateRouter(allRouters) {
    let routes = [] //数组!! 向数组中的最后一个位置添加元素push  存储的是前端需要的路由的信息
    const deeptList = (allRouters) => { //定义递归函数,用来递归服务端返回的路由信息
        allRouters.forEach(item => { //遍历路由信息,如果路由信息下有子路由信息,处理子路由的信息
            if (item.children && item.children.length > 0) {
                deeptList(item.children)
            } else {
                //如果服务端的路由信息是没有子路由信息,将服务端的子路由信息保存到routes数组中
                routes.push({
                    name: item.name,
                    path: item.path,
                    component: () => import(`${item.component}`),
                    meta: {
                        title: item.meta.title
                    }
                })
            }
        })
    }
    deeptList(allRouters) //调用递归函数
    return routes
}

await loadAsyncRoutes()


//导出路由
export default router